<template>
  <div id="right" style="overflow-y:auto;">
    <el-page-header @back="$router.back()" :content="$route.meta.title" />
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="真实姓名" prop="userName">
            <el-input v-model="ruleForm.userName" placeholder="请输入真实姓名" />
          </el-form-item>
        </el-col>
     
      </el-row>
       <el-row>
           <el-col :span="8">
          <el-form-item label="民族" prop="nation">
            <el-select v-model="ruleForm.nation" placeholder="请选择">
              <el-option :label="item.label" :value="item.value" v-for="(item,k) in nationArr" :key="k" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="ruleForm.gender" placeholder="请选择">
              <el-option label="20" :value="item.value" v-for="(item,k) in genderArr" :key="k" />
            </el-select>
          </el-form-item>
        </el-col>
     
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="userCardNumber">
            <el-input v-model="ruleForm.userCardNumber" placeholder="请输入身份证号码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="15">
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入家庭住址" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="success" @click="post()" :loading="postStatus">申领</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import nation from '@/assets/nation.js'
export default {
  name: 'healthcreate',
  data() {
    return {
      postStatus: false,
      classList: [],
      genderArr: [
        {
          value: 1,
          label: '男'
        },
        {
          value: 2,
          label: '女'
        }
      ],
      nationArr:nation,
      ruleForm: {
        userCardNumber:'',
        userName: '',
        papersType:'身份证',
        gender: null,
        nation: '',
        phone: '',
        address: ''
      },
      rules: {
        userName: [{ required: true, message: "请输入真实姓名" }],
        gender: [{ required: true, message: "请选择性别" }],
        nation: [{ required: true, message: "请输入民族" }],
        userCardNumber: [{ required: true, message: "请输入身份证号码" }],
        phone: [{ required: true, message: "请输入手机号码" }],
        address: [{ required: true, message: "请输入家庭住址" }]
      }
    };
  },
  mounted() {
  },
  methods: {
    post() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
        //   this.postStatus = true
        //   this.$http.post(false, '', "/HealthCard/AddHealthCard", {
        //     userCardNumber: this.ruleForm.userCardNumber,
        //     userName: this.ruleForm.userName,
        //     gender: this.ruleForm.gender,
        //     nation: this.ruleForm.nation,
        //     address: this.ruleForm.address,
        //     phone: this.ruleForm.phone,
        //     papersType:this.ruleForm.papersType
        //   }).then(res => {
        //     this.postStatus = false
        //     if (res.status) {
        //       this.$message.success(res.message)
        //       this.$router.back()
        //     } else {
        //       this.$message.error(res.message);
        //     }
        //   });
        }
      });
    }
  },
  components: {

  },
  watch: {},
  props: {},
  computed: {},
  //组件销毁事件
  destroyed() { }
};
</script>
<style lang="">
  
</style>